<template>
  <div class="admin-login">
      <div class="login-box">
          <h2 class="login-flag">
          </h2>
          <div class="input-box">
              <div class="form-item">
                  <el-input placeholder="系统会员账号" prefix-icon="el-icon-user" type="text" v-model.trim="userName" maxlength="15" clearable></el-input>
              </div>
              <div class="form-item">
                  <el-input placeholder="密码" type="password" prefix-icon="el-icon-lock" v-model.trim="userPassword" maxlength="15" clearable></el-input>
              </div>
              <el-button type="primary" round @click="login" v-loading.fullscreen.lock="isLoading">登录系统</el-button>
              <p>忘记密码？请联系管理员</p>
          </div>
      </div>
  </div>
</template>

<script>
import { setToken, setCookies } from "@/utils/auth.js";
import { httpErrorStatus } from "@/utils/httpCode.js";
import request from "@/utils/request";
import qs from "qs";

// import md5 from "js-md5";

export default {
  name: "Adminlogin",
  data() {
    return {
      userName: "",
      userPassword: "",
      isLoading: false
    };
  },
  filters: {
    upper(value) {
      return value.toUpperCase(); //转大写
    }
  },
  methods: {
    login() {
      let that = this;
      let inputData = {
        account: this.userName,
        password: this.userPassword //需要md5加密
      };
      if (inputData.account === "" || inputData.password === "") {
        that.$message({
          message: "输入不完整",
          duration: "1000",
          type: "error",
          center: true
        });
      } else {
        //打开加载动画
        that.isLoading = true;
        // 使用封装的请求
        request({
          url: that.$api.login,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          method: "POST",
          data: qs.stringify(inputData)
        })
          .then(res => {
            //判断账号密码错误
            if (res.code == "400005") {
              that.$message({
                message: "账号或密码错误",
                duration: "1000",
                type: "error",
                center: true
              });
            } else {
              //存登录信息到cookie
              //状态 user.status : 1是启用 0禁用  , -1是删除
              if (res.data.user.status == "1"||res.data.user.status == "0") {
                // 跳转首页
                new Promise((resolve, reject) => {
                  setCookies("adminName", res.data.user.name);
                  // setCookies("avatar", res.data.user.avatar);
                  // setCookies("adminType", res.data.user.adminType);
                  setCookies("department", res.data.user.department);
                  setCookies("loginTime", res.time);
                  setCookies("user", res.data.user);
                  if(res.data.permissions[0]){
                    localStorage.setItem("authorization", JSON.stringify(res.data.permissions[0].children));
                  }
                  if(res.data.permissions[1]){
                    localStorage.setItem("assetsAuthorization", JSON.stringify(res.data.permissions[1].children));
                  }
                  setToken(res.data.token);
                  resolve(res.data.token);
                }).then((res) => {
                  console.log(res);
                  this.$store.dispatch("loginSaveUserInfo");
                  that.$router.push({ path: "/ProcessConsole" });
                });
              } else {
                //账户被禁用不允许登录
                that.$message({
                  message: "账号已被禁用,请联系管理员",
                  duration: "1000",
                  type: "error",
                  center: true
                });
              }
            }
          })
          .finally(() => {
            that.isLoading = false;
          });
      }
    }
  }
};

</script>

<style lang="less" scoped>
.login-box {
  width: 521px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -238px;
  margin-left: -260px;
  overflow: hidden;
}
.admin-login {
  background: url(/static/images/login_bg.png);
  background-size: cover;
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  .login-flag {
    background: url(/static/images/login_text.png);
    height: 178px;
    color: #fff;
    font-size: 2rem;
    line-height: 150px;
    text-align: center;
  }
  .input-box {
    padding-left: 120px;
    padding-right: 120px;
    padding-bottom: 50px;
  }
}
.el-button {
  display: block;
  width: 100%;
  box-shadow: 0px 3px 4px rgba(46, 161, 254, 0.1);
  padding: 15px;
  border-radius: 50px;
}
</style>
